<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
<div id="app">
    <el-row>
        <el-button @click="open">默认按钮</el-button>
        <el-button type="primary" @click="open1">主要按钮</el-button>
        <el-button type="success" @click="open2">成功按钮</el-button>
        <el-button type="info" @click="open3">信息按钮</el-button>
        <el-button type="warning" @click="open4">警告按钮</el-button>
        <el-button type="danger" @click="open5">危险按钮</el-button>
    </el-row>
</div>
<script>
    new Vue({
        el: "#app",
        methods: {
            open() {
                this.$message("这个普通消息");
            },
            open1() {
                this.$message("这是一条消息");
            },
            open2() {
                this.$message({
                    message: "这个成功消息",
                    type: "success"
                })
            },
            open3() {
                this.$message.error("这是一条普通消息")
            },
            open4() {
                this.$message({
                    message: "这是警告消息",
                    type: "warning"
                })
            },
            open5() {
                this.$message({
                    message: "这个是错误信息",
                    type: "error"
                })
            }

        }
    })

</script>
</body>
</html>